<template>
  <el-card class="box-card">
    <div slot="header">
      <BreadCard>素材管理</BreadCard>
    </div>
     <div style="padding-bottom: 20px;">
        <el-radio-group v-model="collect" size="mini" @change="hCollect">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button @click="dialogVisible=true" type="success" size="mini" style="float:right">上传图片素材</el-button>
      </div>
      <!-- 素材列表 布局组件 -->
      <el-row :gutter="10">
        <!-- :xs="12" :sm="6" :md="6" :lg="4"默认一行是24 当宽度为
        xs时显示一行两个依次类推 -->
        <el-col :xs="12" :sm="6" :md="6" :lg="4"
            v-for="img in images"
            :key="img.id"
            class="img_item">
           <el-image
            style="width: 180px; height: 180px"
            :src="img.url"
            fit="cover"></el-image>
            <!-- fit确定图片如何适应容器框 -->
          <div class="option" v-show="!collect">
            <span class="el-icon-star-off" :class="{'red': img.is_collected}" @click="hSwitchCollect(img)"></span>
            <span class="el-icon-delete" @click="del(img.id)"></span>
          </div>
        </el-col>
      </el-row>
      <el-pagination
      background
      style="margin-top:20px;"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="images.per_page"
      layout="prev, pager, next, jumper"
      :total="total_count">
    </el-pagination>
    <!-- 上传图片文件的对话框 append-to-body: 让这个弹出层在最上面不要被其它元素挡住-->
    <el-dialog
      title="上传素材"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      center
      >
      <!--
        upload组件
        action 必选参数 上传的地址
        headers 请求头
        show-file-list 是否显示已上传文件列表
        on-success 上传成功的钩子函数
        on-error 上传失败的钩子函数
        before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
        name: 设置上传的文件参数名，要与后端接口中的要求一致
      -->
      <el-upload
        class="avatar-uploader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :headers="headers"
        :show-file-list="false"
        :on-success="hUploadSuccess"
        name="image"
        :before-upload="beforeAvatarUpload">
        <!--
          如果当前有预览地址就说明图片上传成功了。
          给用户展示这张图，用户成功地看到这张图时，关闭整个上传对话框。
          图片的onload事件：
          - 当你设置图片的src时，浏览器会去请求图片的资源，当图片请求回来之后
          会一有一个事件触发出来，这个事件就是load。
        -->
       <el-image v-if="imageUrl" :src="imageUrl" @load="hImageLoad" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: 'Images',
  data () {
    return {
      collect: false,
      images: [],
      page: 1,
      perPage: 10,
      total_count: null,
      dialogVisible: false, // 是否显示弹出对话框
      imageUrl: '',
      headers: {
        Authorization: 'Bearer ' + JSON.parse(localStorage.getItem('tokenInfo'))
      }
    }
  },
  created () {
    this.getImages()
  },
  methods: {
    async hSwitchCollect (img) {
      console.log(img)
      // 点击收藏完成收藏功能
      try {
        const res = await this.$http({
          method: 'put',
          url: `/mp/v1_0/user/images/${img.id}`,
          data: {
            collect: !img.is_collect // 切换是否点击收藏
          }
        })
        console.log(res)
        // 1、请求接口成功后进行页面修改
        // this.getImages()
        // 2、或者直接修改样式也可以
        img.is_collected = !img.is_collected // 因为页面的样式选择是响应式的 所以这里进行取反页面也会对样式进行及时的更新
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败')
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt05M = file.size / 1024 / 1024 < 0.5

      if (!isJPG) {
        this.$message.error('图片只能是 JPG 格式!')
      }
      if (!isLt05M) {
        this.$message.error('图片大小不能超过 0.5MB!')
      }
      return isJPG && isLt05M
    },
    hImageLoad () {
      // 表示图片加载完成，此时就可以正常显示
      console.log('hImageLoad....')
      setTimeout(() => {
        this.imageUrl = ''
        // 关闭对话框
        this.dialogVisible = false
      }, 2000)
    },
    // 如果上传成功，则会把响应结果传给res
    hUploadSuccess (res) {
      console.log(res)
      // 保存上传成功之后的图片地址
      this.imageUrl = res.data.url
      this.$message.success('上传素材成功')
      this.getImages()
    },
    async getImages () {
      const res = await this.$http.get('/mp/v1_0/user/images', {
        params: {
          collect: this.collect,
          page: this.page,
          per_page: 10
        }
      })
      console.log(res)
      this.images = res.data.data.results
      this.total_count = res.data.data.total_count
    },
    handleCurrentChange (val) {
      console.log(val)
      this.page = val
      this.getImages()
    },
    hCollect () {
      console.log(this.collect)
      // 重置页数
      this.page = 1
      this.getImages()
    },
    del (id) {
      this.$confirm('确认要删除吗？').then(() => {
        console.log(id)
        this.$http.delete(`/mp/v1_0/user/images/${id}`).then((res) => {
        // this.$http({
        //   method: 'DELETE',
        //   url: '/mp/v1_0/articles/' + id
        // }).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getImages() // 数据在后端请求回来的 更加严谨
          // 还可以this.articles.splice(index,1)
        }).catch(err => {
          this.$message({
            message: '删除失败',
            type: 'error'
          })
          console.dir(err)
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .img_item{
    position: relative;
    box-sizing: border-box;
  }
  .option{
    position: absolute;
    left: 5px;
    width:180px;
    bottom: 5px;
    height: 30px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #fff;
    span {
      margin: 0 30px;
      cursor: pointer;
    }
  }
  .red{
      color: red;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    transform: translateX(50%);
    border:1px solid #ccc;
    box-shadow: 1px 1px 4px #888888;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    transform: translateX(50%);
  }
</style>
